<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>唯品会 - 品牌特卖网站</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="header">
        <div class="logo">唯品会</div>
        <div class="search-box">
            <input type="text" placeholder="搜索品牌/商品">
            <button class="search-btn">搜索</button>
        </div>
        <nav class="user-nav">
            <a href="login.html">登录</a>
            <a href="register.html">注册</a>
            <a href="cart.html">购物车</a>
        </nav>
    </header>

    <!-- 轮播图 -->
    <div class="slider-container">
        <div class="slider">
            <div class="slide active" style="background-image: url('./banner1.jpg')"></div>
            <div class="slide" style="background-image: url('./banner2.jpg')"></div>
            <div class="slide" style="background-image: url('./banner3.jpg')"></div>
        </div>
        <div class="slider-controls">
            <span class="dot active"></span>
            <span class="dot"></span>
            <span class="dot"></span>
        </div>
    </div>

    <!-- 商品分类 -->
    <section class="categories">
        <h2>热门分类</h2>
        <div class="category-grid">
            <div class="category-item">女装</div>
            <div class="category-item">男装</div>
            <div class="category-item">美妆</div>
            <div class="category-item">鞋包</div>
            <div class="category-item">母婴</div>
            <div class="category-item">居家</div>
        </div>
    </section>

    <!-- 商品列表 -->
    <section class="product-list">
        <h2>今日推荐</h2>
        <div class="products" id="productContainer">
            <!-- 商品将通过JavaScript动态加载 -->
        </div>
    </section>

    <script src="js/main.js"></script>
</body>
</html>